import { FiledChildProps } from "@/types";
import { Button, ColorPicker, Input, InputNumber, Space, Switch } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { ReactAceEditor } from "@/components/common/ReactAceEditor.tsx";
import { useState } from "react";

export const CanvasSettings = ({
  storeData,
  options,
  onOptionsChange,
  onStoreDataChange,
}: FiledChildProps) => {
  const [showCodeEditor, setShowCodeEditor] = useState(false);

  return (
    <div style={{ padding: "10px" }}>
      <Space direction="vertical">
        <FormRowCol label="默认颜色">
          <ColorPicker
            allowClear
            className={"w-full"}
            value={options.color}
            showText
            onChange={(_, hex) => {
              onOptionsChange("color", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="画笔填充颜色">
          <ColorPicker
            className={"w-full"}
            value={storeData.penBackground}
            showText
            allowClear
            onChange={(_, hex) => {
              onStoreDataChange("penBackground", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="背景颜色" illustrate={"优先级高于背景图片"}>
          <ColorPicker
            className={"w-full"}
            value={options.background}
            showText
            allowClear
            onChange={(_, hex) => {
              onOptionsChange("background", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="背景图片" illustrate={"背景颜色为undefined时生效"}>
          <Input
            placeholder="url"
            value={storeData.bkImage}
            onChange={(e) => {
              onStoreDataChange("bkImage", e.target.value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="背景网格">
          <Switch
            checkedChildren="显示"
            unCheckedChildren="隐藏"
            checked={options.grid}
            onChange={(checked) => {
              onOptionsChange("grid", checked);
            }}
          />
        </FormRowCol>
        {/* <FormRowCol label="网格自动对齐">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={options.autoAlignGrid}
            onChange={(checked) => {
              onOptionsChange("autoAlignGrid", checked);
            }}
          />
        </FormRowCol>*/}
        <FormRowCol label="网格颜色">
          <ColorPicker
            className={"w-full"}
            value={options.gridColor}
            showText
            allowClear
            onChange={(_, hex) => {
              onOptionsChange("gridColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="网格大小">
          <InputNumber
            className={"w-full"}
            value={options.gridSize}
            controls={true}
            onChange={(value) => {
              onOptionsChange("gridSize", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="网格角度">
          <InputNumber
            className={"w-full"}
            value={options.gridRotate}
            placeholder={"°"}
            controls={true}
            onChange={(value) => {
              onOptionsChange("gridRotate", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="标尺">
          <Switch
            checkedChildren="显示"
            unCheckedChildren="隐藏"
            onChange={(checked) => {
              onOptionsChange("rule", checked);
            }}
            checked={options.rule}
          />
        </FormRowCol>
        <FormRowCol label="标尺颜色">
          <ColorPicker
            className={"w-full"}
            value={options.ruleColor}
            showText
            allowClear
            onChange={(_, hex) => {
              onOptionsChange("ruleColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"初始化JS"}>
          <Button
            onClick={() => {
              setShowCodeEditor(true);
            }}
          >
            编 辑
          </Button>
          <ReactAceEditor
            open={showCodeEditor}
            tip={"打开图纸后，执行的初始脚本。"}
            onOk={(code) => {
              setShowCodeEditor(false);
              onStoreDataChange("initJs", code);
            }}
            onCancel={() => setShowCodeEditor(false)}
            value={storeData.initJs || ""}
          ></ReactAceEditor>
        </FormRowCol>

        {/*<FormRowCol label="pc端自动缩放">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            onChange={(checked) => {
              onStoreDataChange("autoSizeinPc", checked);
            }}
            checked={storeData.autoSizeinPc || false}
          />
        </FormRowCol>
        <FormRowCol label="移动端自动缩放">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            onChange={(checked) => {
              onStoreDataChange("autoSizeinMobile", checked);
            }}
            checked={storeData.autoSizeinMobile || false}
          />
        </FormRowCol>
        <FormRowCol label="预览不充满窗口">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            onChange={(checked) => {
              onStoreDataChange("previewUnScale", checked);
            }}
            checked={storeData.previewUnScale || false}
          />
        </FormRowCol>*/}
      </Space>
    </div>
  );
};
